<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <!-- import Element UI CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    /* 消除页面的白边 */
    body {
      margin: 0;
      padding: 0;
    }
    /* 网站Logo后续文本上下居中对其 */
    .nav-menu img{
      vertical-align: middle;
      height: 97px;
    }
    /* 导航菜单链接样式 */
    .nav-menu a{
      color: #666;
      text-decoration: none;
    }
    /* 导航激活 */
    .nav-menu .active{
      color: #0aa1ed;
    }
    /* 导航菜单和商品分类居中 */
    .nav-menu .nav-menu-bar{
        width: 1200px;
        margin: 0 auto;
    }
    .nav-menu{
      border-bottom: #0aa1ed solid 3px;
    }
    /* 商品分类导航栏的背景颜色 */
    .category{
      background-color: #0aa1ed;
    }
    /* 商品分类导航栏搜索框的位置 */
    .category .search-box{
      float: right;
      position: relative;
      top: 10px;
      left: -22px;
    }
    /* 商品分类导航菜单整体宽 */
    .category .el-menu{
      width: 1200px;
      margin: 0 auto;
    }
    /* 内容区域的宽度 */
    .el-main{
      width: 1200px;
      margin: 0 auto;
    }
    /* Top 10 样式 */
    .top-sales h3{
      font-size: 20px;
      margin: 0;
      padding-bottom: 8px;
      border-bottom: #eee solid 1px;
    }
    /* 商品框样式 */
    .product{
      /* 商品上边距 */
      margin-top: 20px;
    }
    /* 商品标题样式 */
    .product h4{
      font-size: 14px;
      margin: 0;
      padding: 8px 0;
      border-bottom: #eee solid 1px;
    }
    /* 商品销售数量 */
    .product span{
      float: right;
    }
    /* 商品价格样式 */
    .product b{
      color: #f40;
      font-size: 16px;
    }
    /* 页脚样式 */
    .el-footer .top-border{
      background-image: url('imgs/wave.png');
      height: 90px;
    }
    /* 页脚文字样式 */
    .el-footer .footer-text{
      font-size: 14px;
      background-color: #3f3f3f;
      text-align: center;
      color: #b1b1b1;
      padding: 20px 0;
    }
    .el-footer{
      padding: 0;
    }
  </style>
  <title>商城首页</title>
</head>
<body>
<div id="app">
  <el-container>
    <!-- 头部导航栏 -->
    <el-header class="nav-menu" height="100px">
      <div class="nav-menu-bar">
        <img src="imgs/logo.png" alt="酷鲨商城">
        <a class="active" href="index.html">商城首页</a><el-divider direction="vertical"></el-divider>
        <a href="news.html">热点资讯</a><el-divider direction="vertical"></el-divider>
        <a href="">商家入驻</a><el-divider direction="vertical"></el-divider>
        <a href="">社会招聘</a><el-divider direction="vertical"></el-divider>
        <a href="">校园招聘</a><el-divider direction="vertical"></el-divider>
        <a href="">招采平台</a><el-divider direction="vertical"></el-divider>
        <a href="">商家入驻</a><el-divider direction="vertical"></el-divider>
        <a href="">举报平台</a><el-divider direction="vertical"></el-divider>
        <a href="">快递查询</a><el-divider direction="vertical"></el-divider>
        <a href="">帮助中心</a>
      </div>
    </el-header>
    <!-- 头部导航栏结束 -->
    <!--商品分类开始-->
    <el-header class="category" height="60px">
      <el-menu mode="horizontal"
               background-color="#0aa1ed"
               text-color="#fff"
               active-text-color="#fff"
               :default-actvice="selectedCategoryId">
        <el-menu-item
          v-for="category in categories"
          :key="category.id"
          :index="category.id">{{category.name}}</el-menu-item>
        <div class="search-box">
          <el-input placeholder="请输入搜索的内容">
            <!-- slot="append"作用是把按钮追加在文本框里面-->
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </el-menu>
    </el-header>
    <!--商品分类结束-->
    <el-main>
      <!-- 轮播图和排行榜 -->
      <!-- gutter="20"表示每个元素之间的间隔是20px -->
      <el-row gutter="20">
        <!-- 总列数24, span="18"表示占18列 -->
        <el-col span="18">
          <!--轮播图开始-->
          <el-carousel height="300px">
            <el-carousel-item v-for="banner in banners">
              <!--如果属性里面出现变量 必须使用属性绑定,也就是在属性名前面加:-->
              <img :src="banner.image" width="100%" height="100%">
            </el-carousel-item>
          </el-carousel>
          <!--轮播图结束-->
        </el-col>
        <!-- 总列数24, span="6"表示占6列 -->
        <el-col span="6">
          <!--排行榜开始-->
          <el-card class="top-sales">
            <h3>
              <i class="el-icon-medal"></i> 销量最高
            </h3>
            <el-table :data="topSales" height="220px">
              <el-table-column type="index" label="排名"></el-table-column>
              <el-table-column prop="title" label="标题"></el-table-column>
              <el-table-column prop="sales" label="销量"></el-table-column>
            </el-table>
          </el-card>
          <!--排行榜结束-->
        </el-col>
      </el-row>
      <!-- 轮播图和排行榜结束 -->
      <!-- 商品列表开始-->
      <!-- gutter="20"表示每个元素之间的间隔是20px -->
      <el-row gutter="20">
        <el-col span="6" v-for="product in products">
          <el-card class="product">
            <img :src="product.image" width="100%" height="233">
            <h4>{{product.title}}</h4>
            <p style="font-size: 12px">
              <b>￥{{product.discount}}</b>
              <s>{{product.price}}</s>
              <span>销量:{{product.sales}}件</span>
            </p>
          </el-card>
        </el-col>
      </el-row>
    <!--商品列表结束-->
    </el-main>
    <el-footer>
      <div class="top-border"></div>
      <div class="footer-text">
        <p>Copyright © 高慧强学版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
        <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
      </div>
    </el-footer>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!-- import axios -->
<script src="https://cdn.staticfile.org/axios/0.21.4/axios.min.js"></script>
<script>
 let app = new Vue({
    el: '#app',
    data: function() {
      return {
        selectedCategoryId: 1,
        categories: [
          {id:1, name:'精彩活动'},
          {id:2, name:'精品女装'},
          {id:3, name:'品牌男装'},
          {id:4, name:'母婴产品'},
          {id:5, name:'医药健康'},
          {id:6, name:'数码科技'}],
        banners:[
          {id:1, image:'imgs/b1.jpg'},
          {id:2, image:'imgs/b2.jpg'},
          {id:3, image:'imgs/b3.jpg'}],
        topSales:[
          {title:'小米手机',sales:2313},
          {title:'安踏拖鞋',sales:1859},
          {title:'李宁毛巾',sales:1536},
          {title:'联想电脑',sales:965},
          {title:'华为电视',sales:854},
          {title:'匹克跑鞋',sales:125}],
        products:[
          {title:'森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古',discount:233,price:598,image:'imgs/a.jpg',sales:2342},
          {title:'茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装',discount:233,price:598,image:'imgs/b.jpg',sales:2342},
          {title:'雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季上衣潮ins',discount:233,price:598,image:'imgs/c.jpg',sales:2342},
          {title:'【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚连帽外套冬',discount:233,price:598,image:'imgs/d.jpg',sales:2342},
          {title:'BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花宽松外套ins',discount:233,price:598,image:'imgs/e.jpg',sales:2342},
          {title:'香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领紫色呢子大衣',discount:233,price:598,image:'imgs/f.jpg',sales:2342},
          {title:'SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦',discount:233,price:598,image:'imgs/g.jpg',sales:2342},
          {title:'美特斯邦威女MTEE 贺岁系列中长款风衣736598',discount:233,price:598,image:'imgs/h.jpg',sales:2342},
          {title:'imone2021秋款黑色小西装外套女韩版学生宽松学院风外套jk外套',discount:233,price:598,image:'imgs/i.jpg',sales:2342},
          {title:'BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫衣情侣上衣',discount:233,price:598,image:'imgs/j.jpg',sales:2342},
          {title:'憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修身绵羊皮风衣外',discount:233,price:598,image:'imgs/k.jpg',sales:2342},
          {title:'美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色潮流女士牛仔',discount:233,price:598,image:'imgs/a.jpg',sales:2342}]
      }
    },
   methods:{

   },
   mounted(){

   }
 })
</script>
</html>